import React, { Component } from 'react';
import { Map } from 'immutable';

export default class App extends Component {
  state = {
    info: {
      name: 'zhangsan',
      sex: 'man',
      age: 20,
    },
  };

  render() {
    return (
      <div>
        <button
          onClick={() => {
            let old = Map(this.state.info);
            let newObj = old.set('name', 'lisi').set('age', 25);
            this.setState({
              info: newObj.toJS(),
            });
          }}>
          click
        </button>
        <div>
          <div> {this.state.info.name}</div>
          <div>{this.state.info.age}</div>
          <div>{this.state.info.sex}</div>
        </div>
      </div>
    );
  }
}

// export default class App extends Component {
//   state = {
//     info: Map({
//       name: 'zhangsan',
//       sex: 'man',
//       age: 20,
//     }),
//   };

//   render() {
//     return (
//       <div>
//         <button
//           onClick={() => {
//             this.setState({
//               info: this.state.info.set('name', 'lisi').set('age', 25),
//             });
//           }}>
//           click
//         </button>
//         <div>
//           <div> {this.state.info.get('name')}</div>
//           <div>{this.state.info.get('age')}</div>
//           <div>{this.state.info.get('sex')}</div>
//         </div>
//       </div>
//     );
//   }
// }

// const obj1 = {
//   name: '111',
//   age: 100,
//   list: ['11', '22'],
//   city: {
//     id: 1,
//     name: 'ww',
//   },
// };
// console.log(obj1);

// // 普通对象 转为 immutable 对象
// const immutable1 = Map(obj1);
// const immutable2 = immutable1.set('age', 200);

// console.log(immutable1, immutable2);

// console.log(immutable1.get('age'), immutable2.get('age'));

// // immutable 转为 普通对象
// console.log(immutable1.toJS(), immutable2.toJS());
